//加载公共样式
require('../../assets/css/public.less')
//加载自己的样式
require('./cuorse-detal.less');
//获取axios工具函数
const request = require('../../lib/request/request.js')
// 引入图标
require('../../assets/public/fonts/iconfont.css')
// 服务器地址
const API = 'http://fitness.h5.itsource.cn:3701'
// 获取元素
function $(sel) {
    return document.querySelector(sel)
}

window.onload = () => {
    console.log(location.search);//?id=1
    // 获取id
    const cuorseId = location.search.split('=')[1]
    console.log(cuorseId);


    // 获取数据
    function getData() {
        request.get('/api/train/courseDetail', {
            params: {
                id: cuorseId
            }
        }).then(res => {
            console.log(res.data);
            // 解构数据
            let { data, errno } = res.data
            // 判断
            if (errno === 0) {
                // 吧fragments数据存储到本地
                localStorage.setItem('fragments', JSON.stringify(data.fragments))
                let data2 = data.fragments.map(v => {
                    console.log(v);
                })
                // 渲染
                randerCorseData(data)
            }
        })
    }
    // 初始化请求
    getData()
    // 获取本地数据
    let fragments = JSON.parse(localStorage.getItem('fragments'))
    console.log(fragments);

    // 渲染数据
    function randerCorseData(data) {
        $('.TitleTop').textContent = data.name
        $('.mes').textContent = data.desc
        $('.userImg').src = API + fragments[cuorseId].imgUrl
        $('.qk').textContent = data.calorie
        $('.min').textContent = data.time
        $('.week').textContent = data.frequency
        $('.wu').textContent = data.instrument
        $('.userName').textContent = fragments[cuorseId].title
    }

    // 播放函数
    function play() {
        $('.video').src = API + fragments[cuorseId].videoUrl
        // 监听播放器能播放的时候在播放
        $('.video').addEventListener('canplay', () => {
            // 播放
            $('.video').play()
        })

    }
    // 初始化播放
    play()


}
